<template>
	<div class="login"  @keyup.enter="loginBtn">
		<table border="" cellspacing="" cellpadding="">
			<tr><td style="color:#2C3E50">用户名:</td><td><el-input v-model="username" placeholder="请输入内容"></el-input></td></tr>
			<tr>
				<td style="color:#2C3E50">密码:</td>
				<td><el-input placeholder="请输入密码" v-model="password" show-password></el-input>
				</td>
			</tr>
			<tr><td></td>
				<td class="btn">
					<el-button type="primary" plain @click="loginBtn">登录</el-button>
					<el-button type="primary" plain @click="regBtn">注册</el-button>
					
				</td>
			</tr>
		</table>
	  <!-- </form> -->
	</div>
</template>

<script>
	import { Login } from 'network/login.js'; 
	export default {
	  name: 'Login',
	  data(){
		  return{
			  username:"",
			  password:""
		  }
	  },
	  methods:{
		  loginBtn() {
			  Login(this.username,this.password).then(res=>{
				  if(res.status !== 0) {
					  alert('用户名或密码错误!')
					  return this.$message.error('登录失败')
				  }
					this.common.isLogin = true;
					this.common.token = res.token;
					this.common.userid = res.userId;
					window.sessionStorage.setItem('token',res.data) //保存到本地
					
					if(this.common.isLogin && this.common.comfrompublish )
						return this.$router.replace('/publish')
					this.$router.push('/home');
					
			  })
		  },
		  regBtn(){
			  this.$router.push('/register')
		  }
	  }
	}
</script>

<style scoped="scoped">
	.login{
		box-sizing: border-box;
		width: 100%;
		height: 625px;
		background-image: url(../../../public/bcd.jpg) ;	
		/* 背景图垂直、水平均居中 */
		background-position: center center;
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-attachment: fixed;
		/* 让背景图基于容器大小伸缩 */
		background-size: cover;
		/* 设置背景颜色，背景图加载过程中会显示背景色 */
		padding-top: 150px;
		/* opacity: 0.5; */
	}
	
	table{
		/* margin-top: 300px; */
		
		background-color: rgb(58, 117, 234,0.5);
		/* line-height: 690px; */
		margin:auto auto;
		padding: 30px;
		/* border: 1px,solid,#000; */
	}
	form {
		margin:0 auto;
		text-align: center;
		border: 0;
	}
	td{
		border: 0;
		padding: 6px 0;
	}
	.btn button{
		margin-right: 5px;
	}
	
</style>
